<template>
  <div class="out-wrapper">
    <div :id="'barchart'+idTitle" class="wrapper" :style="{width:'150px',height:'150px'}">

    </div>
    <div class="text-wrapper">
      <div class="text-content">
        <animatedInteger :fix="2" :value="this.data.use*100/this.data.total"></animatedInteger>
        %
      </div>
      <div class="text-title">{{this.title}}</div>

    </div>
  </div>

</template>
<script>
  import echarts from 'echarts';
  import animatedInteger from '@/components/animated-integer';

  export default {
    data() {
      return {
        charts: {}
      }
    },
    props: {
      data: Object,
      idTitle: String,
      title: String,
      color: String,

    },
    watch: {
      data: function (val) {
          this.setData();
      },
    },
    mounted() {
      this.charts = echarts.init(document.getElementById('barchart' + this.idTitle));
      this.setData();
    },
    methods: {
      setData() {
        this.charts.setOption({
          series: [{
            startAngle: 0,
            radius: ['50%', '60%'],
            center: ['50%', '50%'],
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            clockWise: false,
            data: [{
              value: this.data.total - this.data.use,
              itemStyle: {normal: {color: '#00D6FF'}}
            }, {
              value: this.data.use,
              itemStyle: {normal: {color: this.color ? this.color : '#cc0000'}}
            }, {
              value: this.data.total,
              itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}
            }]
          }]
        });
      }
    },
    components: {animatedInteger}
  }
</script>
<style lang="less" scoped>
  .out-wrapper {
    position: relative;
    .text-wrapper {
      width: 150px;
      height: 150px;
      position: absolute;
      padding-top: 45px;
      z-index: 5;
      background-color: transparent;
      text-align: center;
      .text-title {
        font-size: 16px;
        color: #00D6FF;
        text-align: center;
      }
      .text-content {
        font-size: 14px;
        color: #fff;
        text-align: center;
      }
    }
  }

  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
  }
</style>
